<template>
  <div class="tp" v-loading="state.loading">
    <Header />

    <Content>
      <div class="cp">
        <div class="m-bar">
          <div :class="['v-1', state.memberCode !== '-1' ? 'active' : '']"> 客户 </div>
        </div>

        <div style="padding: 16px 8px; background-color: #fff; border-top-right-radius: 8px">
          <div :class="['m-body', state.memberCode === '-1' ? 'bg2' : 'bg1']">
            <a-flex align="center" gap="middle">
              <a-avatar
                :size="52"
                :src="OSS_IMG_URL(memberRef.memberWeixinDataBean?.headImgUrl, vipAvatar)"
              />

              <div>
                <a-flex gap="small" align="flex-end">
                  <template>
                    <span class="name"> {{ memberRef.realName }}</span>
                    <span class="tag" style="margin-bottom: 2px">{{
                      getLabel(memberSources, memberRef.memberSource) || '--'
                    }}</span>
                  </template>
                </a-flex>
                <!-- <div v-if="state.memberCode !== '-1'" class="d-regular mobile">
                  {{ memberRef.mobile }}
                </div> -->

                <div v-if="state.memberCode !== '-1'">
                  <a-flex gap="small" align="flex-end">
                    <span class="name"> {{ memberRef.realName }}</span>
                    <span class="tag" style="margin-bottom: 2px">
                      {{
                        memberRef.memberType == 1
                          ? '新客'
                          : memberRef.memberType == 2
                            ? '体验客'
                            : memberRef.memberType == 3
                              ? '会员'
                              : memberRef.memberType
                      }}
                    </span>
                  </a-flex>
                  <div class="d-regular mobile">
                    {{ memberRef.mobile?.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}
                  </div>
                </div>
              </div>

              <div class="fill"></div>
            </a-flex>
          </div>
        </div>

        <div
          class="card"
          style="border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0"
        >
          <a-row :gutter="24">
            <a-col :span="9">
              <a-tabs v-model:activeKey="state.search.cateType" type="line">
                <a-tab-pane v-for="o in state.proCategoryTypeN" :key="o.value" :tab="o.label">
                  <a-flex gap="small" wrap="wrap" class="cate-sub">
                    <div
                      :class="[
                        'use',
                        'cell',
                        state[o.value].cateCode === null ? 'active' : 'tacit',
                      ]"
                      @click="state[o.value].cateCode = null"
                      >全部
                    </div>
                    <div
                      v-for="z in getCateSubList(o.value)"
                      :key="z.cateCode"
                      :class="[
                        'use',
                        'cell',
                        state[o.value].cateCode === z.cateCode ? 'active' : 'tacit',
                      ]"
                      @click="state[o.value].cateCode = z.cateCode"
                    >
                      {{ z.cateSubName }}
                    </div>

                    <div class="btn" v-if="getCateSubAll(o.value).length > state.foldMinCount">
                      <a-button
                        v-if="state[o.value].hasFold"
                        type="link"
                        size="small"
                        :icon="h(CaretDownOutlined)"
                        @click="state[o.value].hasFold = false"
                        >展开
                      </a-button>
                      <a-button
                        v-else
                        type="link"
                        size="small"
                        :icon="h(CaretUpOutlined)"
                        @click="state[o.value].hasFold = true"
                        >收起
                      </a-button>
                    </div>
                  </a-flex>
                  <div class="p-list">
                    <template v-if="state[o.value].pager.list?.length > 0">
                      <div
                        :class="[
                          'p-card',
                          isExistProductByCart(o.value, item) && 'active tri-active',
                        ]"
                        v-for="item in state[o.value].pager.list"
                        :key="item.goodsSn"
                        @click="
                          !isExistProductByCart(o.value, item) && handleSelectCard(o.value, item)
                        "
                      >
                        <a-flex gap="middle">
                          <a-image
                            :width="64"
                            :height="64"
                            :src="OSS_IMG_URL(item.cardImage || item.goodsImage)"
                            :fallback="imgErrSrc"
                          />

                          <a-flex class="fill right" vertical :gap="2">
                            <div class="cn-medium title"
                              >{{ item.cardName || item.goodsName }}
                            </div>
                            <div class="fill"></div>
                            <a-flex gap="small" justify="space-between">
                              <div class="price"
                                ><span class="d-regular value">{{ item.salePrice }}</span
                                ><span class="unit">元</span></div
                              >
                              <div class="desc" if="o.value === 'C'">
                                {{ getChildrenLabel(proCardType, item.cardType, item.cardSubType) }}
                              </div>
                            </a-flex>
                          </a-flex>

                          <div class="tri-symbol"></div>
                          <div v-if="isExistProductByCart(o.value, item)" class="tri-checked">
                            <CheckOutlined />
                          </div>

                          <div class="add">
                            <img
                              src="./img/add-1.png"
                              class="use icon"
                              @click="handleSelectCard(o.value, item)"
                              alt=""
                            />
                          </div>
                        </a-flex>
                      </div>

                      <div class="pagination">
                        <a-pagination
                          :default-page-size="state.pageSize"
                          size="small"
                          v-model:current="state[o.value].pager.currentPage"
                          :total="state[o.value].pager.totalCount"
                          show-size-changer
                          @showSizeChange="onShowSizeChange"
                        />
                      </div>
                    </template>
                    <a-empty v-else />
                  </div>
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <a-col
              :span="15"
              style="
                background: rgba(255, 223, 231, 0.06);
                border-radius: 4px;
                border: 1px solid #ffdfe7;
                padding: 16px;
              "
            >            
              <card-item :data-source="[quoteCardItem]" :is-select="false" />

              <a-flex align="center" gap="small" style="padding-left: 10vh; margin: 24px">
                <img src="./img/upgrade.png" style="width: 40px; height: 37px" alt="" />
                <span style="font-size: 16px; color: #eb6485">升级卡片</span>
              </a-flex>

              <template v-if="shopCartRef.length">
                <div v-for="item in shopCartRef" :key="item.id" class="cart-item">
                  <a-row align="middle">
                    <a-col :span="22">
                      <div class="ci-body">
                        <div>
                          <a-flex
                            gap="small"
                            class="pro-name"
                            align="center"
                            justify="space-between"
                          >
                            <div class="title">{{ item.title }}</div>
                            <div class="number">
                              <a-input-number
                                v-model:value="item.qty"
                                disabled
                                :controls="true"
                                :min="1"
                                :max="9999999"
                                :precision="0"
                                @change="onCartQtyChange(item, $event)"
                              />
                            </div>
                          </a-flex>
                        </div>

                        <div>
                          <a-row :gutter="12" class="ct-row">
                            <a-col :span="18">
                              <a-flex gap="middle">
                                <div class="fill">
                                  <div class="c-label">原卡种</div>
                                  <a-input
                                    :disabled="true"
                                    :default-value="quoteCardItem.cardName"
                                  ></a-input>
                                </div>
                                <div class="fill">
                                  <div class="c-label">美容师</div>
                                  <a-select
                                    v-model:value="item.beauticianList"
                                    mode="multiple"
                                    :token-separators="[',']"
                                    placeholder="请选择美容师"
                                    :options="beauticianRef"
                                    style="width: 100%"
                                    :showSearch="false"
                                  ></a-select>
                                </div>
                              </a-flex>

                              <div
                                v-if="!!item.cardMoneyId"
                                style="font-size: 14px; color: #666666"
                              >
                                余额：{{ item.moneyLastAmount }}&nbsp;&nbsp;
                                {{ getProductDiscount(getCardMoneyPackItemByCart(item)) }}
                              </div>

                              <a-flex gap="small" align="center" style="margin-top: 12px">
                                <div class="title">抵扣金额</div>
                                <div class="number">
                                  <a-input-number
                                    v-model:value="item.deductionAmount9"
                                    :controls="true"
                                    :min="item.minDeductionAmount9"
                                    :max="9999999"
                                    :precision="2"
                                  />
                                  <!-- @change="calcPriceByCart()" -->
                                </div>
                              </a-flex>
                            </a-col>

                            <a-col :span="6" style="text-align: right">
                              <div
                                style="
                                  font-weight: 400;
                                  font-size: 14px;
                                  color: #999999;
                                  text-decoration: line-through;
                                "
                              >
                                <span>零售价</span>&nbsp;&nbsp;<span>¥&nbsp;</span
                                ><span class="d-regular">{{ item.retailAmount }}</span>
                              </div>
                              <div style="margin-top: 8px">
                                <span style="font-size: 14px; color: #6d414c">折后价</span
                                >&nbsp;&nbsp;<span style="font-weight: 500; color: #6d414c"
                                  >¥&nbsp;</span
                                >
                                <span style="font-weight: 500; font-size: 20px; color: #6d414c">{{
                                  item.discountAfterAmount
                                }}</span>
                              </div>

                              <div style="margin-top: 8px">
                                <span style="font-size: 14px; color: #6d414c">-</span
                                >&nbsp;&nbsp;<span style="font-weight: 500; color: #6d414c"
                                  >¥&nbsp;</span
                                >
                                <span style="font-weight: 400; font-size: 16px; color: #6d414c">{{
                                  item.deductionAmount9
                                }}</span>
                              </div>
                            </a-col>
                          </a-row>

                          <div
                            style="
                              border-top: 1px solid #f7e4e9;
                              text-align: right;
                              padding-top: 8px;
                              margin-top: 8px;
                            "
                          >
                            <span style="font-size: 14px; color: #6d414c">应付</span
                            >&nbsp;&nbsp;<span
                              style="font-weight: 500; color: #6d414c; font-size: 14px"
                              >¥&nbsp;</span
                            >
                            <!-- <span style="font-weight: 500; font-size: 20px; color: #6d414c">{{
                              item.payableAmount
                            }}</span> -->
                            <span style="font-weight: 400; font-size: 16px; color: #6d414c">{{
                                (item.discountAfterAmount - item.deductionAmount9).toFixed(2)
                              }}</span>
                          </div>
                        </div>
                      </div>
                    </a-col>

                    <a-col :span="2">
                      <div class="delete" @click="onDeleteCartItem(item)">
                        <div class="icon">
                          <DeleteOutlined />
                        </div>
                        <div class="label">删除</div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </template>
              <div
                v-else
                style="
                  background: #fff;
                  border-radius: 8px;
                  border: 1px dashed #ce7b90;
                  font-weight: 400;
                  font-size: 16px;
                  color: #eb6485;
                  height: 150px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                请先从左侧选择商品
              </div>

              <div class="c-title"> 其他信息 </div>
              <div style="padding: 12px 0">
                <a-row :gutter="[24, 12]" align="middle">
                  <a-col :span="3" class="f-label" style="text-align: right"> 下单时间 </a-col>
                  <a-col :span="8">
                    <a-date-picker
                      v-model:value="cartInfoRef.addTime"
                      :show-time="true"
                      :disabled-date="(value) => !dayjs(value).isSameOrBefore(dayjs())"
                    />
                  </a-col>
                  <a-col :span="13"></a-col>

                  <a-col :span="3" class="f-label" style="text-align: right"> 优惠金额 </a-col>
                  <a-col :span="8">
                    <a-input-number
                      v-model:value="cartInfoRef.discountAmount"
                      :controls="true"
                      :min="0"
                      :max="maxDiscount"
                      :precision="2"
                      addon-after="元"
                    />
                  </a-col>
                  <a-col :span="13"></a-col>

                  <a-col :span="3" class="f-label" style="text-align: right"> 备注 </a-col>
                  <a-col :span="16">
                    <a-textarea v-model:value="cartInfoRef.remarks" show-count :maxlength="200" />
                  </a-col>
                  <a-col :span="5"></a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </Content>

    <Footer style="padding: 12px 0">
      <a-flex gap="middle" justify="center" align="center">
        <div
          ><span style="font-weight: 400; font-size: 14px; color: #6d414c"
            >已选{{ getCartQtyTotal() }}件&nbsp;&nbsp;合计&nbsp;</span
          >
          <span style="font-weight: 400; color: #6d414c">¥&nbsp;</span>
          <span style="font-weight: 400; font-size: 20px; color: #6d414c">{{
            paymentCount
          }}</span>
        </div>

        
        <div>
          <!-- <a-button danger @click="onSavePendingOrder">挂单</a-button> -->
        </div>
       
        <div>
          <a-button type="primary" @click="onPayment()">提交订单</a-button>
        </div>
      </a-flex>
    </Footer>

    <Payment @register="registerPayment" />
  </div>
</template>

<script setup>
  import {
    defineOptions,
    h,
    onMounted,
    reactive,
    ref,
    watch,
    provide,
    computed,
    onUnmounted,
  } from 'vue';
  import {
    CaretDownOutlined,
    CaretUpOutlined,
    CheckOutlined,
    DeleteOutlined,
  } from '@ant-design/icons-vue';
  import { useMessage } from '@/hooks/web/useMessage';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { GET, PAGE, POST } from '@/api/http';
  import {
    getChildrenLabel,
    getLabel,
    imgErrSrc,
    memberSources,
    OSS_IMG_URL,
    proCardType,
  } from '@/api/ds';
  import { useRoute, useRouter } from 'vue-router';

  import { useDrawer } from '@/components/Drawer';
  import {
    calcPriceByCart,
    clearCart,
    getCardMoneyPackItemByCart,
    getCartDiscountAmount,
    getCartQtyTotal,
    getDeductionAmount,
    initCart,
    isExistProductByCart,
    loadBeautician,
    onAddProduct2Cart,
    onCartQtyChange,
    onDeleteCartItem,
    savePendingOrder,
    loadPendingData,
    updateQuoteCard,
  } from './cart.js';
  import { getProductDiscount } from '@/views/member/util.js';
  import vipAvatar from '@/assets/images/vip-avatar.png';
  import dayjs from 'dayjs';

  import Payment from './payment.vue';
  import Footer from '@/widget/footer.vue';
  import CardItem from './card-select-item.vue';
  import { round } from '@/api/util.js';

  defineOptions({ name: 'CashierIndex' });

  const cartType = 'cardUpgrade';
  const { createMessage } = useMessage();
  const [registerPayment, { openDrawer: paymentDrawer }] = useDrawer();

  const quoteCardItem = ref([]);
  const route = useRoute(),
    router = useRouter();

  let { memberCode = null, takeId = null, workDate = null, cardNo = null } = route.query;
  memberCode ||= '-1';

  const { cardMoneyRef, cartInfoRef, shopCartRef, shopConsumeRef, beauticianRef } =
    initCart(cartType);

  updateQuoteCard({});

  const state = reactive({
    loading: false,
    memberCode,
    takeId,
    workDate,
    cardNo,
    proCategoryTypeN: [],

    search: {
      selectStatus: 0,
      cateType: 'C',
      goodsName: null,
    },

    foldMinCount: 6,
    pageSize: 10,

    V: {
      selectedSn: new Set(),
      selected: [],
      hasFold: true,
      cateCode: null,
      version: null,
      cardTimesPack: [],
      cardMoneyPack: [],
      pager: {
        currentPage: 0,
      },
    },

    P: {
      selectedSn: new Set(),
      selected: [],
      hasFold: true,
      cateCode: null,
      version: null,
      pager: {
        currentPage: 0,
      },
    },
    S: {
      selectedSn: new Set(),
      selected: [],
      hasFold: true,
      cateCode: null,
      version: null,
      pager: {
        currentPage: 0,
      },
    },
    C: {
      selectedSn: new Set(),
      selected: [],
      hasFold: true,
      cateCode: null,
      version: null,
      pager: {
        currentPage: 0,
      },
    },

    categoryList: [],
  });

  const memberRef = ref({});

  const maxDiscount = computed(() => {
    return 999999;
    // return shopCartRef.value?.reduce((acc, item) => {
    //   return acc + (item.discountAfterAmount - item.deductionAmount9);
    // }, 0) ?? 999999;;
  });

  const maxDiscountAfterAmount = computed(() => {
    const cardAmount =
      (quoteCardItem.value?.remainAmount || 0) + (quoteCardItem.value?.remainBounsScore || 0);
    const discountAfterAmount = shopCartRef.value?.[0]?.discountAfterAmount ?? 0;
    return cardAmount > discountAfterAmount ? discountAfterAmount : cardAmount;
  });

  const paymentCount = computed(() => {
    return round(
      shopCartRef.value?.reduce((acc, item) => {
        return acc + (item.discountAfterAmount - item.deductionAmount9);
      }, 0),
    );
  });

  onMounted(async () => {
    onSearch();
    loadQuoteCard().then();
    loadBeautician().then();
  });

  onUnmounted(() => {
    updateQuoteCard({});
  });

  async function loadQuoteCard() {
    const { memberCode, cardNo } = state;
    quoteCardItem.value =
      (
        await POST('/card/getUserOneCardBenefitsInfo', {
          pageFlag: false,
          memberCode,
          cardNo,
        })
      )?.userCardPack ?? {};

    updateQuoteCard(quoteCardItem.value);
  }

  function onPayment() {
    const { memberCode } = state;

    if (paymentCount.value < 0) {
      createMessage.error('优惠金额不能大于应付金额');
      return;
    }

    if (getCartDiscountAmount() > getDeductionAmount()) {
      createMessage.error('优惠金额不能大于应付金额');
      return;
    }

    const allArraysHaveValues = shopCartRef._rawValue.every((obj) => obj.beauticianList.length > 0);

    if (!allArraysHaveValues) {
      createMessage.error('请选择美容师');
    } else {
      paymentDrawer(true, {
        memberCode,
        cartType,
        quoteCardItem: quoteCardItem.value,
        updateDefaultTotalFee() {
          return paymentCount.value;
        },
        discountAfterAmount: shopCartRef.value?.reduce((acc, item) => {
          return acc + (item.deductionAmount9 || 0);
        }, 0),
      });
    }
  }

  watch(
    () => `${state.memberCode},${state.takeId}`,
    async () => {
      const { memberCode, takeId, workDate, cardNo } = state;

      state.proCategoryTypeN = [
        {
          value: 'C',
          label: '卡项',
        },
      ];

      clearCart();
      memberRef.value =
        memberCode === '-1'
          ? {}
          : (await GET('/membership/getMemberBaseInfo', { memberCode })) ?? {};

      //加载客户权益
      Object.assign(state.V, { cardTimesPack: [], cardMoneyPack: [] });

      if (!!takeId) {
            //加载挂单
            await loadPendingData({ takeId, workDate });
          }
    },
    { immediate: true },
  );

  function getCateWatch(cateType) {
    const target = state[cateType];
    return `${target.cateCode || ''}-${target.pager.currentPage || 0}-${target.version || ''}`;
  }

  watch(
    () => cartInfoRef.value.discountAmount,
    () => {
      calcPriceByCart();
    },
  );

  watch(
    () => getCateWatch('C'),
    () => doPager('C'),
  );

  function getCateSubAll(cateType) {
    return state.categoryList.filter((z) => z.cateType === cateType);
  }

  function getCateSubList(cateType) {
    const list = getCateSubAll(cateType);
    return state[cateType].hasFold ? list.slice(0, state.foldMinCount) : list;
  }

  function onSearch() {
    doCategoryList();
  }

  function doCategoryList() {
    const { C } = state;

    POST('/product/libCategoryStoreListAll', { status: 1 }).then((list) => {
      list ||= [];

      //附加卡项分类
      list.push(
        ...proCardType.map((o) => ({
          ...o,
          cateType: 'C',
          cateCode: o.value,
          cateSubName: o.label,
        })),
      );

      state.categoryList = list;

      [C].forEach((target) => {
        target.cateCode = null;
        target.pager.currentPage = 1;
        target.version = Math.random();
      });
    });
  }

  function doPager(cateType) {
    const { goodsName } = state.search;
    const { [cateType]: target, pageSize } = state,
      { cateCode, pager } = target,
      { currentPage } = pager;

    const url = '/card/getCardBatchData';
    if (cateType === 'C') {
      PAGE(url)({ cardName: goodsName, cardType: cateCode, status: 1, currentPage, pageSize }).then(
        (result) => {
          result?.list?.forEach((o) => {
            //统一命名
            const { cardName: goodsName, batchNo: goodsSn } = o;
            Object.assign(o, { goodsName, goodsSn });
          });

          target.pager = result ?? {};
        },
      );
    }
  }

  function onShowSizeChange(current, size) {
    state.pageSize = size
    doPager(state.search.cateType)
  }

  provide('onSavePendingOrder', { onSavePendingOrder });

  async function onSavePendingOrder() {
    const { takeId, workDate } = state;
      const { memberCode, cardNo } = state;
    await savePendingOrder({ memberInfo: memberRef.value, takeId, workDate }, {isUpgrade: true, cardNo, memberCode});

    createMessage.success('已挂单');
    router.replace('/cashier/index/take-order');
  }


  function handleSelectCard(cateType, proItem) {
    if (proItem.batchNo === quoteCardItem.value?.batchNo) {
      createMessage.error('不能选择相同卡项进行升级');
      return;
    }
    onAddProduct2Cart(cateType, proItem);
  }
</script>

<style lang="less" scoped>
  .cart-item {
    .header {
      background-image: url('./img/cart-item-h-bg.png');
      background-repeat: no-repeat;
      background-position: left top;
      background-size: contain;
      height: 36px;
      margin-left: 0;

      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 12px;
    }

    .ci-body {
      background: #ffffff;
      box-shadow: 0 1px 6px 0 rgba(229, 197, 197, 0.5);
      border-radius: 0 4px 4px 4px;
      padding: 0 12px 12px 12px;
      margin-bottom: 18px;
    }

    .delete {
      padding-left: 24px;
      color: #eb6485;

      .icon {
        font-size: 26px;
      }

      .label {
        margin-top: 2px;
        font-size: 12px;
      }
    }

    .pro-name {
      padding: 8px 12px;
      margin: 0 -12px;
      background: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #fff0f0;
      border-radius: 4px 4px 0 0;
      margin-bottom: 8px;

      .title {
        font-weight: 600;
        font-size: 18px;
        color: #c95e78;
      }

      .number {
        width: 120px;
      }
    }

    .ct-row {
      .c-label {
        font-weight: 400;
        font-size: 14px;
        color: #6d414c;
        padding-bottom: 6px;
      }
    }
  }
</style>

<style lang="less" scoped>
  .m-bar {
    position: relative;
    display: flex;
    flex-direction: row;

    .v-1,
    .v-2 {
      position: relative;
      background: #fff;
      font-weight: 500;
      font-size: 16px;
      color: #666666;

      height: 40px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .active {
      background: #f3c5d2;
      color: #fff;
      z-index: 2;
    }

    .v-1 {
      width: 130px;
      border-radius: 8px 8px 0 0;
    }

    .v-2 {
      width: 139px;
      border-radius: 0 8px 0 0;
      margin-left: -9px;
    }
  }

  .bg1 {
    background-image: url('./img/m-body-bg1.png');
  }

  .bg2 {
    background-image: url('./img/m-body-bg2.png');
  }

  .m-body {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 86px;

    padding: 12px 12px 8px 16px;

    .name {
      font-weight: 500;
      font-size: 18px;
      color: #ce7b90;
    }

    .tag {
      background: linear-gradient(90deg, #f79dbb 0%, #eb6485 100%);
      border-radius: 32px;
      font-size: 11px;
      color: #ffffff;
      padding: 2px 6px;
    }

    .mobile {
      font-weight: 400;
      font-size: 14px;
      color: #ce7b90;
      margin-top: 6px;
    }

    .replace {
      width: 97px;
      height: 40px;

      display: flex;
      align-items: center;
      justify-content: center;

      background: #f1a3b8;
      box-shadow: 0 1px 5px 0 rgba(174, 174, 174, 0.47);
      border-radius: 8px;

      font-weight: 500;
      font-size: 16px;
      color: #fff;

      margin-right: 12rpx;
    }
  }
</style>

<style lang="less" scoped>
  .card {
    height: 100%;
    padding: 16px;

    .c-title {
      padding: 32px 0 6px 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .c-title:first-child {
      padding-top: 8px;
    }
  }

  .cate-sub {
    position: relative;
    cursor: pointer;

    .cell {
      padding: 3px 12px;
      border-radius: 24px;
      font-size: 14px;
      font-weight: 400;
    }

    .tacit {
      border: 1px solid #e0e5ec;
      color: #091f3d;
    }

    .active {
      border: 1px solid @primary-color;
      background-color: @primary-color;
      color: #fff;
    }

    .btn {
      position: absolute;
      z-index: 2;
      right: 0;
      bottom: 0;
    }
  }

  .p-list {
    margin: 24px 0 0;

    .p-card {
      position: relative;
      margin: 12px 0;
      overflow: clip;
      border: 1px solid #e0e5ec;
      border-radius: 4px;

      .right {
        padding: 8px 32px 8px 0;

        .title {
          color: #091f3d;
          font-size: 14px;
        }




        .price {
          color: @primary-color;

          .value {
            font-size: 14px;
            letter-spacing: 1px;
          }

          .unit {
            padding-left: 2px;
            font-size: 10px;
          }
        }

        .desc {
          color: #acb4bf;
          font-size: 12px;
        }
      }

      .add {
        text-align: right;
        margin-top: 6px;
        margin-right: 6px;

        .icon {
          width: 25px;
          object-fit: contain;
        }
      }
    }

    .pagination {
      text-align: right;
    }

    .active {
      border: 1px solid @primary-color;
    }
  }
</style>
